<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="__CSS__/ex/common.css">
    <link rel="stylesheet" href="__CSS__/ex/login.css">
    <title>闪兑</title>
    <script src="__JS__/ios-web-app.js"></script>
</head>

<body style="padding-top: 38px">
    <header class="normal_header">
        <div class="header_pic">
            <a href="{:U('Index/index')}"><img src="__IMG__/ex/back_black.png" alt="" width=></a>
        </div>
        <p style="padding-left:.2rem;">兑汇</p>
        <div style="float: right;">
<!--            <a href="{:U('duihuan/history')}" >记录</a>-->
        </div>
    </header>
    <section class="change_content">
        <div id="app1">
        <div class="shandui">
            <div>
<!--                <div class="from">-->
<!--                    <span index="8">USDT</span>-->
<!--                </div>-->
                <!--<select id="from">-->
                    <!--<option value="1">EXUU</option>-->
                    <!--<option value="8">USDT</option>-->
                <!--</select>-->
                <div class="axz">
                    <img src="__IMG__/ex/american.png" alt="" width="1rem" id="USD"  style="display: inline">
                    <select name="" id=""  disabled>
                        <option value="">USD</option>
                    </select>
                </div>
            </div>
            <div>
                <img src="__IMG__/ex/duihuan.png" alt="" class="qiehuan">
            </div>
            <div>
<!--                <div class="to">-->
<!--                    <span index="1">EXUU</span>-->
<!--                </div>-->
                <!--<select id="to">-->
                    <!--<option value="1">EXUU</option>-->
                    <!--<option value="8" selected>USDT</option>-->
                <!--</select>-->
                <div class="axz">
                    <img src="__IMG__/ex/china.png" id="china" alt="" width="1rem" style="display: inline">
                    <img src="__IMG__/ex/taiguo.png" id="taiguo" alt="" width="1rem">
                    <img src="__IMG__/ex/xinjiapo.png" id="xinjiapo" alt="" width="1rem" >
                    <img src="__IMG__/ex/malai.png" id="malai" alt="" width="1rem">
                    <img src="__IMG__/ex/EU.png" id="EU" alt="" width="1rem" >
<!--                    <img src="__IMG__/ex/riben.png" id="riben" alt="" width="1rem" >-->
                    <img src="__IMG__/ex/hanguo.png" id="hanguo" alt="" width="1rem">
                    <img src="__IMG__/ex/exlogo1.png" id="dacm" alt="" width="1rem">
                    <select name="" id="selectid" onchange="role()" v-model="selected">
                        <option value="1" price="{$config.b2}">CNY</option>
                        <option value="2" price="{$config.b4}">THB</option>
                        <option value="3" price="{$config.b5}">SGD</option>
                        <option value="4" price="{$config.b6}">MYR</option>
                        <option value="5" price="{$config.b7}">EUR</option>
<!--                        <option value="6">JPR</option>-->
                        <option value="7" price="{$config.b8}">KRW</option>
                        <option value="8" price="{$config.b3}">DACM</option>
                    </select>
                </div>
            </div>

        </div>
        <div class="shandui">
            <p>汇率</p>
            <p style="float: right;" id="price">{$config.b2}</p>
        </div>
        </div>
        <div class="shandui" style="border: none;">
            <p style="line-height: .4rem;">余额: <span id="after">$0.00</span></p>
        </div>
        <div class="shandui" style="margin: .4rem 0;">
            <b>$</b><input type="text" id="from_num" name="shandui" placeholder="请输入数量" style="width:100%;">
        </div>
        <span style="margin:.2rem;color: #EC1C24;">备注(20个字符以内)</span>
        <button class="sure">兑汇</button>
    </section>
    <input type="hidden" id="exuuapi" value="{$config.ptr17}">
    <input type="hidden" id="usdtapi"value="">
    <style>
        .mrecord{
            margin-top: .4rem;
        }
        .mrecord li {
            padding: 0 .2rem;
            box-sizing: border-box;
        }
        .mrecord li span:first-child{
            width: 3rem;
        }
        .mrecord li span.status{
            display: inline-block;
            width: 1.5rem;
            text-align: center;
            line-height: .6rem;
            background-color: #06b57a;
            color: #fff;
            border-radius: .08rem;
        }

        .mrecord li span.tongguo{
            display: inline-block;
            width: 1.5rem;
            text-align: center;
            line-height: .6rem;
            background-color: deepskyblue;
            color: #fff;
            border-radius: .08rem;
        }
        .mrecord li span.bohui{
            display: inline-block;
            width: 1.5rem;
            text-align: center;
            line-height: .6rem;
            background-color: red;
            color: #fff;
            border-radius: .08rem;
        }
        .from ,.to{
            line-height: .6rem;
            background-color: #fff;
            padding-left: .2rem;
            margin-bottom: .2rem;
        }
        .sure{
            width: 6.32rem;
            margin: .4rem auto 0;
            line-height: .88rem;
            border-radius: .08rem;
            text-align: center;
            color: #fff;
            background-color: #EC1C24;
            display: block;
        }
        .axz{
            position: relative;
            text-align: center;
        }
        .axz span{
            position: absolute;
            top: 0;
            right: .2rem;
            display: inline-block;
            line-height: .6rem;
        }
        .jiage{
            text-align: center;
            margin-top: .3rem;
        }
        .change_content{
            background: #fff;
        }
        .shandui{
            border-bottom: 1px solid #F1F3F4;
            padding-bottom: .1rem;
        }
        .shandui img{
            width: .7rem;
        }
        .shandui select{
            margin: 0;
            width: 1.1rem;
            padding: 0;
            font-size: .3rem;
            -webkit-appearance: none;
            background: url(/Public/Home/images/ex/arrow-bottom.png) no-repeat scroll right center transparent;
            background-size: 20% 40%;
        }
        .shandui b,.shandui input{
            font-size: .4rem;
            padding-left: .1rem;
        }
        .axz img{
            display: none;
        }
        .normal_header{
            display: block;
        }
        .normal_header div, .normal_header p, .normal_header a{
            display: inline-block;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        $(".sure").click(function () {
            // alert($("#to").val());

            if($("#from_num").val()==''){
                alert('请输入数量');return false;
            }
            if(isNaN($("#from_num").val())){
                alert('数字不合法');return false;
            }
            var num = parseFloat($("#from_num").val())
            var price = parseFloat($("#selectid option:selected").attr('price'))

            var after = (num*price).toFixed(5)
            $("#after").text(after)

        })


        $('.qiehuan').click(function () {
            return false;
            // $left=$(".from").text();
            // $right=$('.to').text();
            // $('.from').text($right);
            // $('.to').text($left);
            $left=$(".from").html();
            $right=$(".to").html();
            $('.from').html($right);
            $('.to').html($left);
            // return false;
            getusdt();
        })

        // $('#from_num').change(function () {
        //     getusdt();
        // })


        $("#from_num").bind('input propertychange',function () {
            // getusdt()
            let value = $("#from_num").val()
            let reg =/[^\d]/g
            if (value.match(reg)) {
                value = value.replace(/[^\d.]/g,'')
                $("#from_num").val(value)
            }
        })


        $exuuapi=$("#exuuapi").val();
        getusdt();
        function getusdt() {
            let value = $("#from_num").val()
            let reg =/[^\d]/g
            if (value.match(reg)) {
                value = value.replace(/[^\d.]/g,'')
                $("#from_num").val(value)
            }

            if($("#from_num").val()==''){
                $num=1;
            }else {
                $num=$("#from_num").val();
            }
            if($(".to>span").attr('index')==8){
                // $shandui=($num*$exuuapi/res.rate).toFixed(2);
                $shandui=($num*$exuuapi).toFixed(2);
                $("#shandui_num").val($shandui);
            }
            if($(".to>span").attr('index')==1){
                // $shandui=($num*res.rate/$exuuapi).toFixed(2);
                $shandui=($num/$exuuapi).toFixed(2);
                $("#shandui_num").val($shandui);
            }
        }


        function role(){
            var sel1 = document.getElementById('selectid');
            var index = sel1.selectedIndex;
            var value=sel1.options[index].value;
            console.log(value);
            if(value==1){
               $('.axz img').css('display','none');
               $('#china').css('display','inline');
                $('#USD').css('display','inline')
            }else if(value==2){
                $('.axz img').css('display','none');
                $('#taiguo').css('display','inline');
                $('#USD').css('display','inline')
            }else if(value==3){
                $('.axz img').css('display','none');
                $('#xinjiapo').css('display','inline');
                $('#USD').css('display','inline')
            }
            else if(value==4){
                $('.axz img').css('display','none');
                $('#malai').css('display','inline');
                $('#USD').css('display','inline')
            }else if(value==5){
                $('.axz img').css('display','none');
                $('#EU').css('display','inline');
                $('#USD').css('display','inline')
            }else if(value==6){
                $('.axz img').css('display','none');
                $('#riben').css('display','inline');
                $('#USD').css('display','inline')
            }else if (value==7) {
                $('.axz img').css('display','none');
                $('#hanguo').css('display','inline');
                $('#USD').css('display','inline')
            }else {
                $('.axz img').css('display','none');
                $('#dacm').css('display','inline');
                $('#USD').css('display','inline')
            }
            var price = $("#selectid option:selected").attr('price')
            console.log(price)
            $("#price").text(price)
            $("#after").text('0.00')
            $("#from_num").val('')
        }
    </script>
    <script>
        // new Vue({
        //     el:'#app1',
        //     data:{
        //         selected:'1'
        //     }
        // })
    </script>
</body>

</html>